<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

	<h:head>
		<title>BusType Management Prototype</title>
		<h:outputScript library="js" name="jquery.js"></h:outputScript>
		<h:outputScript library="js" name="common.js"></h:outputScript>
	</h:head>
	
	<h:body>
		<h:form id="busTypeForm">
		<ui:remove>
		<h:selectOneMenu id="busTypeList" value="#{busTypeList.selected}"
			converter="#{busTypeList}" onchange="submit()"
			valueChangeListener="#{busTypeForm.busTypeChanged}">
			<f:selectItems value="#{busTypeList.busTypes}"></f:selectItems>
		</h:selectOneMenu>
		<h:message for="busTypeForm" binding="#{busTypeForm.formMessage}"></h:message>
		<br />
		</ui:remove>
		
		<f:ajax event="valueChange" render="@form">
			<h:selectBooleanCheckbox id="newTypeMode" value="#{busTypeForm.newTypeMode}" title="Create a new type"
				valueChangeListener="#{busTypeForm.modeChanged}"></h:selectBooleanCheckbox>
			<br />
		</f:ajax>
			
			<f:ajax disabled="#{ !busTypeForm.newTypeMode}" event="valueChange" render="nameMessage">
			<h:outputLabel for="name" value="Type Name:"></h:outputLabel>
			<h:inputText id="name" binding="#{busTypeForm.nameInput}" validator="#{busTypeForm.validateName}">
			</h:inputText>
			<h:message id="nameMessage" for="name"></h:message>
			</f:ajax>
			
			<br />
			
			<h:outputLabel for="seatType" value="Seat Type:"></h:outputLabel>
			<h:inputText id="seatType" binding="#{busTypeForm.seatTypeInput}">
			</h:inputText>
			<h:message for="seatType"></h:message>
			<br />
			
			<h:outputLabel for="seatCount" value="Seat Count:"></h:outputLabel>
			<h:inputText id="seatCount" binding="#{busTypeForm.seatCountInput}"></h:inputText>
			<h:message for="seatCount"></h:message>
			<br />
			
			<h:commandButton value="Create New Type" action="#{busTypeForm.createBusType}"></h:commandButton>

		</h:form>
		<h:outputScript target="head">
			$(document).ready( 
				function(){
					$("#newTypeMode").click( function() {clearFormInfo();} );
				}			
			);
			
		</h:outputScript>
	</h:body>
</html>